<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="btn" type="primary" :icon="User" @click="addPatient">添加就诊人</el-button>
      </div>
    </template>

    <div class="visitors" v-if="scene === 0">
      <Visitor class="visitor"
               v-for="(item,index) in patientList"
               :key="item.id"
               :user="item"
               @editPatient="editPatient"
               @deletePatient="deletePatient"
               :index="index"/>
    </div>

    <!--添加就诊人信息结构-->
    <div class="form" v-if="scene == 1">
      <!--就诊人表单-->
      <PatientDialog @refreshPatient="getPatientList" :userParam="userParam"/>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import {User} from "@element-plus/icons-vue";
import Visitor from "@/components/visitor/visitor.vue";
import {onMounted, reactive, ref} from "vue";
import {reqGetUser} from "@/api/hospital";
import {AddOrUpdateUser, UserData} from "@/api/hospital/type.ts";
import PatientDialog from '@/components/patient_dialog/index.vue'
import {reqDeletePatient} from "@/api/user";
//就诊人列表
const patientList = ref<UserData[]>([])
//就诊人弹框显示状态
const scene = ref(0)
//收集就诊人信息
const userParam = reactive<AddOrUpdateUser>({
  id: "",
  name: "",
  certificatesType: "",
  certificatesNo: "",
  sex: 1,
  birthdate: "",
  phone: "",
  isMarry: 0,
  isInsure: 0,
  addressSelected: [],
  address: "",
  contactsName: "",
  contactsCertificatesType: "",
  contactsCertificatesNo: "",
  contactsPhone: "",
})

onMounted(()=>{
  getPatientList()
})
const getPatientList = async ()=>{
  const {data} = await reqGetUser()
  patientList.value = data
  scene.value = 0
}

// 显示添加就诊人
const addPatient = ()=>{
  Object.assign(userParam,{
    id: "",
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 1,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
  })
  scene.value = 1
}

// 显示编辑就诊人
const editPatient = (patient:AddOrUpdateUser)=>{
  scene.value = 1
  Object.assign(userParam,patient)
}
// 删除就诊人
const deletePatient = async (id:string)=>{
  await reqDeletePatient(id)
  getPatientList()
}
</script>

<style scoped lang="scss">
.box-card{
  .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .visitors{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px 20px;
  }
}
</style>
